<template>
  <div v-loading="dialogVisiblePayLoading">
    <div class="area-header">
      <span class="area-header-title">{{ actTitle }}</span>
    </div>
    <el-form ref="form" :model="form" :rules="rules" style="position: unset;">
      <el-row>
        <el-table
          tooltip-effect="darkTable"
          style="overflow: auto;"
          :data="form.dealFixedAssetsPaymentDetails"
          border
          class="nowrapTable formTable"
        >
          <el-table-column :label="$t('序号')" align="center" width="50">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('序号') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                type="index"
                v-html="scope.$index + 1"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" min-width="150px">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('科目代码') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealFixedAssetsPaymentDetails.' + scope.$index + '.subjectCode'" :rules="dealFixedAssetsPaymentDetailsRules.subjectCode">
                <el-input v-model="scope.row.subjectCode" :placeholder="$t('科目代码')" disabled />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('科目名称')" align="center" min-width="180px">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('科目名称') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealFixedAssetsPaymentDetails.' + scope.$index + '.costBudgetArray'" :rules="dealFixedAssetsPaymentDetailsRules.costBudgetArray">
                <el-cascader
                  v-model="scope.row.costBudgetArray"
                  :options="dealCostBudgetList"
                  clearable
                  disabled
                  @change="payTypeChange(scope.$index)"
                >
                  <template slot-scope="{ node, data }">
                    <span>{{ $t(data.subjectName) }}</span>
                    <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                  </template>
                </el-cascader>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('申请支付金额') + $t('金额单位')" align="center" min-width="140">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('申请支付金额') }}{{ $t('金额单位') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealFixedAssetsPaymentDetails.' + scope.$index + '.requestPaymentAmount'" :rules="dealFixedAssetsPaymentDetailsRules.requestPaymentAmount">
                <Money v-model="scope.row.requestPaymentAmount" unit="w" disabled />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('实际支付金额') + $t('金额单位')" align="center" min-width="140">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('实际支付金额') }}{{ $t('金额单位') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'dealFixedAssetsPaymentDetails.' + scope.$index + '.actualPaymentAmount'" :rules="dealFixedAssetsPaymentDetailsRules.actualPaymentAmount">
                <Money v-model="scope.row.actualPaymentAmount" unit="w" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('实际付款时间')" align="center" width="180">
            <template slot="header" slot-scope="{}">
              <i style="color: red;">*</i>
              <span>{{ $t('实际付款时间') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'dealFixedAssetsPaymentDetails.' + scope.$index + '.actualPaymentTime'"
                :rules="dealFixedAssetsPaymentDetailsRules.actualPaymentTime"
              >
                <DatePicker v-model="scope.row.actualPaymentTime" style=" width: 150px;" clearable :placeholder="$t('实际付款时间')" />
              </el-form-item>
            </template>
          </el-table-column>
          <!--          <el-table-column :label="$t('操作')" fixed="right" align="center" width="80" class-name="small-padding fixed-width">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button-->
          <!--                size="small"-->
          <!--                type="text"-->
          <!--                icon="el-icon-deleted"-->
          <!--                @click="delHandler(scope.$index, scope.row)"-->
          <!--              >{{ $t('删除') }}</el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
        <!--        <div class="tol">-->
        <!--          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addPayment">{{ $t("添加") }}</el-button>-->
        <!--        </div>-->
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closePage">{{ $t('取消') }}</el-button>
      <el-button type="primary" :disabled="disabledUploading" @click="submitForm">{{ $t('保存') }}</el-button>
    </div>
    <OnlinePreview ref="OnlinePreview" />
  </div>
</template>
<script>
import {
  delDealFixedAssetsPaymentDetails,
  getDealFixedAssetsPayment,
  saveDealFixedAssetsPayment
} from '@/api/deal/fixedAssets/dealFixedAssetsPayment'
import { listTreeInDealCostBudget } from '@/api/deal/fixedAssets/dealCostBudget'

export default {
  props: {
    dialogVisiblePayMoneyValue: {
      type: String,
      default: ''
    },
    dialogVisiblePayTimeValue: {
      type: String,
      default: ''
    },
    actTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        dealFixedAssetsPaymentDetails: []
      },
      type: '',
      // 付款币种
      currencyOptions: [],
      // 主体字典下拉列表
      mainBodySelectOption: [],
      dealCostBudgetList: [],
      // 遮罩层
      dialogVisiblePayLoading: false,
      disabledUploading: false,
      // 主体
      rules: {},
      dealFixedAssetsPaymentDetailsRules: {
        costBudgetArray: [{ required: true, message: this.$t('必填信息'), 	trigger: 'blur' }],
        actualPaymentTime: [{ required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }],
        actualPaymentAmount: [{ required: true, message: this.$t('必填信息'), trigger: ['blur', 'change'] }]
      },
      dealType: '',
      parentCurrency: ''
    }
  },
  created() {
    listTreeInDealCostBudget({ dealId: this.$route.query.id }).then(response => {
      var data = response.rows
      // 国际化
      data.forEach(item => {
        item.label = this.$t(item.label)
        item.children.forEach(item2 => {
          item2.label = this.$t(item2.label)
        })
      })
      this.dealCostBudgetList = data
    })
  },
  methods: {
    init(data) {
      this.dialogVisiblePayLoading = true
      if (data != null && data.id !== undefined) {
        getDealFixedAssetsPayment(data.id).then(response => {
          this.form = response.data
          for (let i = 0; i < this.form.dealFixedAssetsPaymentDetails.length; i++) {
            const type = this.form.dealFixedAssetsPaymentDetails[i]
            this.$set(this.form.dealFixedAssetsPaymentDetails[i], 'costBudgetArray', [])
            this.form.dealFixedAssetsPaymentDetails[i].costBudgetArray.push(type.costBudgetOne)
            this.form.dealFixedAssetsPaymentDetails[i].costBudgetArray.push(type.costBudgetTwo)
            this.payTypeChange(i)
          }
          this.dialogVisiblePayLoading = false
        }).catch(() => {
          this.dialogVisiblePayLoading = false
        })
      } else {
        this.reset()
        this.dialogVisiblePayLoading = false
      }
    },
    // 付款类型的onchang时间
    payTypeChange(value) {
      let vals = this.form.dealFixedAssetsPaymentDetails[value].costBudgetArray
      this.form.dealFixedAssetsPaymentDetails[value].subjectCode = ''
      this.dealCostBudgetList.forEach(item => {
        if (vals === undefined) {
          var temp = []
          temp.push('-1')
          vals = temp
        }
        item.children.forEach(itemTwo => {
          if (itemTwo.id === vals[1]) {
            this.form.dealFixedAssetsPaymentDetails[value].subjectCode = itemTwo.subjectCode
          }
        })
      })
    },
    // 添加行
    addPayment() {
      const row = {
        id: undefined,
        investorId: undefined,
        actualPaymentTime: undefined,
        actualPaymentMoney: undefined,
        exchangeRate: undefined,
        currency: undefined,
        fileList: []
      }
      if (!(this.form.dealFixedAssetsPaymentDetails instanceof Array)) {
        this.$set(this.form, 'dealFixedAssetsPaymentDetails', [])
      }
      this.$nextTick(() => {
        this.form.dealFixedAssetsPaymentDetails.push(row)
        this.$forceUpdate()
      })
    },
    // 删除预算明细
    delHandle(index, row) {
      const that = this
      const id = row.id
      if (id !== undefined && id !== '' && id != null) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        }).then(function() {
          return delDealFixedAssetsPaymentDetails(id).then(response => {
            if (response.code === 200) {
              that.form.dealFixedAssetsPaymentDetails.splice(index, 1)
              return that.msgSuccess(that.$t('删除成功'))
            }
          })
        })
      } else {
        that.form.dealFixedAssetsPaymentDetails.splice(index, 1)
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.dialogVisiblePayLoading = true
          saveDealFixedAssetsPayment(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.dialogVisiblePayLoading = false
          })
        } else {
          this.locationError(document)
        }
      }).catch(() => {
        this.dialogVisiblePayLoading = false
      })
    },
    closePage() {
      this.$parent.$parent.paymentResultOpen = false
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层oaExpenseList
      this.dialogVisiblePayLoading = false
      // 关闭form页面
      if (this.$parent.$parent.paymentResultOpen !== undefined) {
        this.$parent.$parent.paymentResultOpen = false
      }
      // 刷新list页面
      if (this.$parent.$parent.getList !== undefined) {
        this.$parent.$parent.getList()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0px;
}
.customMoneyMaintain {
  -webkit-appearance: none;
  background-color: #F5F7FA;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  text-align: left;
}
</style>
